import { StyleSheet } from 'react-native';

export const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#f5f5f5',
    },
    header: {
        height: 60,
        backgroundColor: '#1e3a8a',
        justifyContent: 'center',
        alignItems: 'center',
        position: 'relative',
        overflow: 'hidden',
    },
    headerBackground: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: '100%',
        height: '100%',
    },
    headerContent: {
        flexDirection: 'row',
        alignItems: 'center',
        paddingHorizontal: 20,
        zIndex: 1,
        width: '100%',
        position: 'relative',
    },
    logo: {
        width: 32,
        height: 32,
        position: 'absolute',
        left: 20,
    },
    headerText: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#ffffff',
        textShadowColor: 'rgba(0, 0, 0, 0.3)',
        textShadowOffset: { width: 1, height: 1 },
        textShadowRadius: 2,
        flex: 1,
        textAlign: 'center',
    },
    backButton: {
        position: 'absolute',
        left: 20,
        top: 14.5,
        zIndex: 2,
        width: 32,
        backgroundColor: '#ffffff',
        borderRadius: 16,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
    },
    backIcon: {
        width: 24,
        height: 24,
    },
    content: {
        flex: 1,
        flexDirection: 'row',
        padding: 10,
        gap: 10,
    },
    leftColumn: {
        flex: 0.8,
        backgroundColor: '#ffffff',
        borderRadius: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        overflow: 'hidden', // 防止列表内容超出卡片边界
    },
    leftColumnContent: {
        flex: 1,
        flexDirection: 'column',
    },
    middleColumn: {
        flex: 0.8,
        backgroundColor: '#ffffff',
        borderRadius: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        overflow: 'hidden', // 防止列表内容超出卡片边界
    },
    rightColumn: {
        flex: 2.4,
        backgroundColor: '#ffffff',
        borderRadius: 8,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        overflow: 'hidden', // 防止列表内容超出卡片边界
    },
    columnContent: {
        flex: 1,
        padding: 10,
        overflow: 'hidden', // 防止内容超出容器
    },
    columnText: {
        fontSize: 14,
        color: '#666',
        textAlign: 'center',
    },
    // 新增的工单列表相关样式
    orderListContainer: {
        flex: 1,
        padding: 10,
        overflow: 'visible', // 确保对号能够超出边界
    },
    orderListContent: {
        paddingBottom: 10, // 添加底部内边距
    },
    loadingContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
    },
    loadingText: {
        fontSize: 14,
        color: '#999',
    },
    emptyContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 10,
    },
    emptyText: {
        fontSize: 14,
        color: '#999',
    },
    orderItem: {
        marginBottom: 10,
        backgroundColor: '#f8f9fa',
        borderRadius: 6,
        overflow: 'hidden',
    },
    orderHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: 12,
        backgroundColor: '#e9ecef',
    },
    orderNumber: {
        fontSize: 14,
        fontWeight: '600',
        color: '#333',
        flex: 1,
    },
    dropdownIcon: {
        width: 16,
        height: 16,
        marginLeft: 8,
    },
    dropdownIconRotated: {
        transform: [{ rotate: '180deg' }],
    },
    batchOrderList: {
        padding: 10,
    },
    batchOrderItem: {
        backgroundColor: '#ffffff',
        borderRadius: 4,
        padding: 8,
        marginBottom: 8,
        borderLeftWidth: 3,
        borderLeftColor: '#007bff',
        overflow: 'visible', // 允许对号超出边界
        // 添加默认边框，避免选中时尺寸变化
        borderWidth: 2,
        borderColor: 'transparent',
    },
    batchOrderRow: {
        flexDirection: 'row',
        marginBottom: 4,
    },
    batchOrderLabel: {
        fontSize: 12,
        color: '#666',
        width: 70,
        fontWeight: '500',
    },
    batchOrderValue: {
        fontSize: 12,
        color: '#333',
        flex: 1,
    },
    // 新增的选中状态样式
    batchOrderItemSelected: {
        borderColor: '#007bff',
        backgroundColor: '#f0f8ff',
        // 移除borderWidth，因为基础样式已经有了
    },
    checkmarkContainer: {
        position: 'absolute',
        top: -5, // 微微超出上边界
        right: -5, // 微微超出右边界
        width: 20,
        height: 20,
        backgroundColor: '#007bff',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1,
    },
    checkmark: {
        color: '#ffffff',
        fontSize: 14,
        fontWeight: 'bold',
    },
    // 分页组件样式
    paginationContainer: {
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 10,
        paddingHorizontal: 10,
        marginTop: 5,
        borderRadius: 10,
        borderTopWidth: 1,
        borderTopColor: '#f0f0f0',
        backgroundColor: '#ffffff',
    },
    paginationArrow: {
        width: 32,
        height: 32,
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#d9d9d9',
        backgroundColor: '#ffffff',
    },
    paginationArrowDisabled: {
        borderColor: '#f0f0f0',
        backgroundColor: '#fafafa',
    },
    paginationArrowText: {
        fontSize: 16,
        color: '#666',
        fontWeight: '500',
    },
    paginationArrowTextDisabled: {
        color: '#d9d9d9',
    },
    paginationInfo: {
        marginHorizontal: 20,
        paddingHorizontal: 12,
        paddingVertical: 6,
        backgroundColor: '#f8f9fa',
        borderRadius: 4,
        borderWidth: 1,
        borderColor: '#e9ecef',
    },
    paginationText: {
        fontSize: 14,
        color: '#333',
        fontWeight: '500',
    },
    // 任务列表相关样式
    taskItem: {
        backgroundColor: '#ffffff',
        borderRadius: 6,
        padding: 12,
        marginBottom: 10,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 1 },
        shadowOpacity: 0.1,
        shadowRadius: 2,
        elevation: 2,
        borderLeftWidth: 4,
        borderLeftColor: '#007bff',
        overflow: 'visible', // 允许对号超出边界
        // 添加默认边框，避免选中时尺寸变化
        borderWidth: 2,
        borderColor: 'transparent',
    },
    // 任务选择相关样式
    taskItemSelected: {
        borderColor: '#007bff',
        backgroundColor: '#f0f8ff',
        // 移除borderWidth，因为基础样式已经有了
    },
    taskCheckmarkContainer: {
        position: 'absolute',
        top: -5,
        right: -5,
        width: 20,
        height: 20,
        backgroundColor: '#007bff',
        borderRadius: 10,
        justifyContent: 'center',
        alignItems: 'center',
        zIndex: 1,
    },
    taskCheckmark: {
        color: '#ffffff',
        fontSize: 14,
        fontWeight: 'bold',
    },
    taskRow: {
        flexDirection: 'row',
        marginBottom: 6,
        alignItems: 'center',
    },
    taskLabel: {
        fontSize: 12,
        color: '#666',
        width: 80,
        fontWeight: '500',
    },
    taskValue: {
        fontSize: 12,
        color: '#333',
        flex: 1,
    },
    taskListContainer: {
        flex: 1,
        overflow: 'visible', // 确保对号能够超出边界
    },
    taskListContent: {
        paddingBottom: 0, // 添加底部内边距，确保最后一个任务完全可见
    },
    // Gantt相关样式
    ganttContainer: {
        flex: 1,
        padding: 5,
        paddingTop: 0,
    },
    ganttTitle: {
        fontSize: 16,
        fontWeight: 'bold',
        color: '#333',
        marginBottom: 15,
        textAlign: 'center',
    },
    ganttItem: {
        backgroundColor: '#f8f9fa',
        borderRadius: 6,
        padding: 12,
        marginBottom: 10,
        borderLeftWidth: 3,
        borderLeftColor: '#007bff',
    },
    ganttItemText: {
        fontSize: 12,
        color: '#333',
        fontFamily: 'monospace',
    },
    emptyGanttContainer: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    emptyGanttText: {
        fontSize: 14,
        color: '#999',
        textAlign: 'center',
    },
    // 时间刻度选择器样式
    timeScaleContainer: {
        flexDirection: 'row',
        justifyContent: 'flex-end', // 改为右对齐
        alignItems: 'center',
        paddingHorizontal: 10,
        paddingVertical: 8,
        backgroundColor: 'transparent', // 移除背景色
        borderRadius: 6,
        // marginBottom: 10,
        gap: 8, // 添加按钮之间的间距
    },
    timeScaleButton: {
        paddingHorizontal: 12,
        paddingVertical: 6,
        borderRadius: 4,
        backgroundColor: '#ffffff',
        borderWidth: 1,
        borderColor: '#e9ecef',
        minWidth: 40,
        alignItems: 'center',
        flexShrink: 0, // 防止按钮被压缩
    },
    activeTimeScaleButton: {
        backgroundColor: '#007bff',
        borderColor: '#007bff',
    },
    timeScaleButtonText: {
        fontSize: 12,
        color: '#666',
        fontWeight: '500',
    },
    activeTimeScaleButtonText: {
        color: '#ffffff',
        fontWeight: '600',
    },

    webview: {
        flex: 1,
        backgroundColor: '#ffffff',
    },
    // 弹窗样式
    modalOverlay: {
        flex: 1,
        backgroundColor: 'rgba(0, 0, 0, 0.5)',
        justifyContent: 'center',
        alignItems: 'center',
    },
    modalContent: {
        backgroundColor: 'white',
        borderRadius: 8,
        padding: 0,
        width: '80%',
        maxWidth: 400,
        shadowColor: '#000',
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowOpacity: 0.25,
        shadowRadius: 3.84,
        elevation: 5,
    },
    modalHeader: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 15,
        borderBottomWidth: 1,
        borderBottomColor: '#e0e0e0',
    },
    modalTitle: {
        fontSize: 18,
        fontWeight: '600',
        color: '#333',
    },
    modalCloseButton: {
        padding: 5,
    },
    modalCloseButtonText: {
        fontSize: 24,
        color: '#999',
        fontWeight: '300',
    },
    modalBody: {
        padding: 20,
    },
    modalRow: {
        flexDirection: 'row',
        marginBottom: 12,
        alignItems: 'flex-start',
    },
    modalLabel: {
        fontSize: 14,
        color: '#666',
        width: 80,
        fontWeight: '500',
    },
    modalValue: {
        fontSize: 14,
        color: '#333',
        flex: 1,
    },
    // 派工弹窗相关样式
    modalFooter: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        paddingHorizontal: 20,
        paddingVertical: 15,
        borderTopWidth: 1,
        borderTopColor: '#e0e0e0',
        gap: 15,
    },
    submitButton: {
        flex: 1,
        backgroundColor: '#007bff',
        paddingVertical: 12,
        paddingHorizontal: 20,
        borderRadius: 6,
        alignItems: 'center',
    },
    submitButtonDisabled: {
        backgroundColor: '#ccc',
    },
    submitButtonText: {
        color: '#ffffff',
        fontSize: 16,
        fontWeight: '600',
    },
    submitButtonTextDisabled: {
        color: '#999',
    },
    cancelButton: {
        flex: 1,
        backgroundColor: '#f8f9fa',
        paddingVertical: 12,
        paddingHorizontal: 20,
        borderRadius: 6,
        alignItems: 'center',
        borderWidth: 1,
        borderColor: '#e9ecef',
    },
    cancelButtonText: {
        color: '#666',
        fontSize: 16,
        fontWeight: '500',
    },
    // 时间选择相关样式
    timeSelectionContainer: {
        flexDirection: 'row',
        alignItems: 'center',
        gap: 10,
        marginTop: 5, // 与上面的标签行保持适当间距
    },
    timeSelector: {
        flex: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        paddingHorizontal: 12,
        paddingVertical: 8,
        borderWidth: 1,
        borderColor: '#d9d9d9',
        borderRadius: 4,
        backgroundColor: '#ffffff',
        minWidth: 120, // 设置最小宽度
    },
    timeText: {
        fontSize: 14,
        color: '#333',
    },
    placeholderText: {
        color: '#999',
    },
    arrowIcon: {
        width: 16,
        height: 16,
    },
    timeSeparator: {
        fontSize: 14,
        color: '#666',
        fontWeight: '500',
    },
    // DatePicker相关样式
    datePickerOverlay: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        zIndex: 9999,
        pointerEvents: 'box-none',
    },
    datePickerContainer: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        transform: [{ translateX: -150 }, { translateY: -200 }],
        width: 300,
        height: 400,
        zIndex: 10000,
    },
});
